<template>
  <div class="from">
    <div class="head">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-row>
        <el-button>搜索</el-button>
      </el-row>
      <p class="box">
        <el-button type="primary" @click="dialogVisible = true"
          >添加用户</el-button
        >
      </p>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <p>
          用户名:<el-input v-model="val1" placeholder="请输入用户名"></el-input>
        </p>
        <p>
          密码:<el-input v-model="val2" placeholder="请输入密码"></el-input>
        </p>
        <p>
          邮箱:<el-input v-model="val3" placeholder="请输入邮箱"></el-input>
        </p>
        <p>
          电话:<el-input v-model="val4" placeholder="请输入电话"></el-input>
        </p>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <el-table :data="$store.state.list" border style="width: 100%">
      <el-table-column prop="id" label="#" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="emit" label="邮箱"> </el-table-column>
      <el-table-column prop="picoe" label="电话"> </el-table-column>
      <el-table-column prop="warr" label="角色"> </el-table-column>
      <el-table-column label="状态">
        <el-switch
          v-model="flag"
          active-color="#13ce66"
          inactive-color="#cccccc"
        >
        </el-switch>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="xiu(scope)"
          >
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="rem(scope)"
          ></el-button>
          <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="修改"
      :visible.sync="centerDialogVisible"
      width="45%"
      center
    >
      <p>
        用户名:<el-input v-model="let1" placeholder="请输入用户名"></el-input>
      </p>
      <p>密码:<el-input v-model="let2" placeholder="请输入密码"></el-input></p>
      <p>邮箱:<el-input v-model="let3" placeholder="请输入邮箱"></el-input></p>
      <p>电话:<el-input v-model="let4" placeholder="请输入电话"></el-input></p>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pah">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      dialogVisible: false,
      val1: "",
      val2: "",
      val3: "",
      val4: "",
      centerDialogVisible: false,
      let1: "",
      let2: "",
      let3: "",
      let4: "",
    };
  },
  mounted() {},
  methods: {
    add() {
      this.dialogVisible = false;
      this.$store.commit("add", {
        name: this.val1,
        emit: this.val3,
        picoe: this.val4,
      });
    },
    rem(scope) {
      // console.log(scope.$index);
      this.$store.commit("rem", scope.$index);
    },

    xiu(scope) {
     this.centerDialogVisible = true;
      this.$store.commit("xiu", {
        indexL: scope.$index,
        name: this.let1,
        emit: this.let3,
        picoe: this.let4,
      });
    },

    pah() {
      centerDialogVisible = false;
    },
  },
  components: {},
};
</script>

<style lang='scss'>
.head {
  display: flex;
  .box {
    margin: 0;
    padding: 0;
    margin-left: 20px;
  }
}
</style>
